<template>
    <div class="sea-float-box" style="width: 100%;">
      <sea-search-panel ref="panelRef" v-model="value" @click="open" readonly style="width: 100%;"></sea-search-panel>

      <div ref="popoverRef" v-show="display" class="float-panel float-bottom">
        <slot></slot>
      </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";

/**
 * 特殊的下拉框
 *
 * 与 select 有着不同的面板设计
 */
const popoverRef = ref();
const panelRef = ref();

const value = ref('');
const display = ref(false);

const open = () => {
    display.value = true;
}

/**
 * 窗口点击事件，除了触发组件和弹窗组件，任何点击事件都要关闭窗口
 * @param evt -
 */
const windowClick = (evt) => {
    const target = evt.target;
    if (!popoverRef.value.contains(target) && !panelRef.value.$el.contains(target)) {
        display.value = false;
    }
}

onMounted(() => {
    window.addEventListener('click', windowClick);
})

onUnmounted(() => {
    window.removeEventListener('click', windowClick);
})
</script>
